<template>
		<view class="msgDetail" :style="[{ transform: 'rotate(' + deg + ')' }, { backgroundColor: color }]" @click="getInfo">
			<view class="tip"><view class="O"></view></view>
			<view class="header">
				<view class="time">
					<text>{{ $attrs.time | format }}</text>
				</view>
				<view class="user">
					<text>{{ $attrs.realname }}</text>
					<button size="mini" class="del" @click="delAdvice" v-if="limit">删除</button>
				</view>
			</view>
			<view class="text">
				<text>{{ $attrs.content }}</text>
			</view>
		</view>
</template>

<script>
import { formatTime } from '../../formatTime.js';
import animate from "../../animate.js"
export default {
	data() {
		return {
			rainfallColor: [
				'rgba(255, 0, 0,.7)',
				'rgba(255, 165, 0,.7)',
				'rgba(255, 255, 0,.7)',
				'rgba(0, 255, 0,.7)',
				'rgba(0, 127, 255,.7)',
				'rgba(0, 0, 255,.7)',
				'rgba(139, 0, 255,.7)'
			]
		};
	},
	filters: {
		format(val) {
			return formatTime(parseInt(val));
		}
	},
	mixins:[animate.mixin],
	computed: {
		deg() {
			return Math.floor((0.5 - Math.random()) * 40) + 'deg';
		},
		color() {
			return this.rainfallColor[Math.ceil(Math.random() * 7) - 1];
		},
	 limit(){
	       if(this.user.status==="876ea4f21078c7d38e3b0bdc74a"||this.user.username===this.$attrs.username){
	         return true
	       }else{
	         return false
	       }
	     }
	},
	methods: {
		getInfo() {
			this.$emit('getInfo', this.$attrs, this.color);
		},
		delAdvice(){
			this.$emit("readyDelAdvice",this.$attrs)
		}
	}
};
</script>

<style scoped lang="scss">
@import url('../../components/css/animate.css');
.msgDetail {
	width: 280upx;
	height: 280upx;
	margin: 20px;
	transition: all 0.3s;
	&:active {
		transform: rotate(0) !important;
	}
	.tip {
		position: relative;
		.O {
			position: absolute;
			width: 20px;
			height: 20px;
			border-radius: 20px;
			background-color: #fff;
			top: 8px;
			left: 10px;
		}
	}
	.header {
		padding-top: 33px;
		.time {
			font-size: 13px;
		}
		.user {
			font-size: 16px;
			padding-left: 15px;
			.del {
				vertical-align: middle;
				margin-left: 5px;
				height: 17px;
				font-size: 10px;
				line-height: 17px;
				background-color: transparent;
				border: 1px solid red;
				transition: all .2s;
				&:active{
					background-color: red;
					color: #000;
				}
			}
		}
	}
	.text {
		box-sizing: border-box;
		padding: 5px 10px;
		height: 130upx;
		width: 100%;
		overflow: hidden;
	}
}
</style>
